<template>
  <van-row>
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="$emit('close')"
    />
    <van-notice-bar v-if="submitForm.sourceType==='0'" mode="closeable">销售订单来源部分字段不可修改。</van-notice-bar>
    <van-notice-bar v-if="submitForm.id===''" mode="closeable">只能新增库存备货来源的排产。</van-notice-bar>
    <van-form @submit="doSubmit">
      <van-field name="radio" label="来源类型" :disabled="submitForm.id!==''" input-align="left">
        <template #input>
          <van-radio-group v-model="submitForm.sourceType" disabled direction="horizontal">
            <van-radio name="0">销售订单</van-radio>
            <van-radio name="1">库存备货</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        :disabled="submitForm.sourceType==='0'"
        readonly
        clickable
        name="moldName"
        :value="submitForm.moldName"
        label="模具"
        placeholder="点击选择模具"
        input-align="left"
        :rules="[{ required: true, message: '请选择模具' }]"
        @click="showMold=true"
      />
      <van-field
        :disabled="submitForm.sourceType==='0'"
        readonly
        name="productName"
        :value="submitForm.productName"
        label="产品名称"
        placeholder="产品名称"
        input-align="left"
        :rules="[{ required: true, message: '请输入产品名称' }]"
      />
      <van-field
        v-model="submitForm.color"
        :disabled="submitForm.sourceType==='0'"
        input-align="left"
        name="color"
        label="颜色"
        placeholder="请输入颜色"
        :rules="[{ required: true, message: '请填写颜色'}]"
      />
      <van-field
        v-model="submitForm.material"
        :disabled="submitForm.sourceType==='0'"
        input-align="left"
        name="material"
        label="材质"
        placeholder="请输入材质"
        :rules="[{ required: true, message: '请填写材质'}]"
      />
      <van-field
        v-model="submitForm.size"
        :disabled="submitForm.sourceType==='0'"
        input-align="left"
        name="size"
        label="尺码"
        placeholder="请输入尺码"
        :rules="[{ required: true, message: '请填写尺码'}]"
      />
      <van-field
        v-model="submitForm.length"
        :disabled="submitForm.sourceType==='0'"
        input-align="left"
        name="length"
        label="长度"
        placeholder="请输入长度"
        :rules="[{ required: true, message: '请填写长度'}]"
      />
      <van-field
        v-model="submitForm.quantity"
        :disabled="submitForm.sourceType==='0'"
        input-align="left"
        name="quantity"
        label="数量"
        type="digit"
        placeholder="请输入数量"
        :rules="[{ required: true, message: '请填写数量'}]"
      />
      <van-field name="radio" label="优先级" input-align="left" :rules="[{ required: true, message: '请选择优先级'}]">
        <template #input>
          <van-radio-group v-model="submitForm.priority" direction="horizontal">
            <van-radio name="0">普通</van-radio>
            <van-radio name="1">加急</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="submitForm.remark"
        rows="2"
        autosize
        input-align="left"
        label="备注"
        type="textarea"
        maxlength="100"
        show-word-limit
        placeholder="请输入订单备注"
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <div v-if="showMold">
      <select-mold ref="selectMold" :visible="showMold" @close="handleCloseMold" />
    </div>
    <div v-if="showAttribute">
      <select-attribute ref="selectAttribute" :visible="showAttribute" @close="handleCloseAttribute" />
    </div>
  </van-row>
</template>

<script>
import { saveProduce, selectProduceById, updateProduceById } from '@/api/produce'
import SelectAttribute from '@/components/modules/selectAttribute.vue'
import SelectMold from '@/components/modules/selectMold.vue'

export default {
  name: 'ProduceSubmitModule',
  components: { SelectMold, SelectAttribute },
  data() {
    return {
      title: '',
      showMold: false,
      showAttribute: false,
      productInfo: {},
      submitForm: {}
    }
  },
  methods: {
    init(id) {
      this.resetForm()
      this.title = '修改排产'
      if (!id) {
        this.title = '新增排产'
        return
      }
      selectProduceById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
          this.submitForm.moldId = resp.data.productInfo.moldId
          this.submitForm.moldName = resp.data.productInfo.moldName
          this.submitForm.color = resp.data.productInfo.color
          this.submitForm.material = resp.data.productInfo.material
          this.submitForm.size = resp.data.productInfo.size
          this.submitForm.length = resp.data.productInfo.length
        }
      })
    },
    resetForm() {
      this.productInfo = {}
      this.submitForm = {
        id: '',
        sourceType: '1',
        moldName: '',
        productName: '',
        color: '',
        material: '',
        size: '',
        length: '',
        quantity: '',
        priority: '',
        remark: ''
      }
    },
    doSubmit() {
      let request = saveProduce
      if (this.submitForm.id) {
        request = updateProduceById
      }
      request(this.submitForm).then(resp => {
        if (resp.success) {
          this.$toast.success('操作成功')
          this.submitForm = {}
          this.$emit('close')
        }
      })
    },
    handleCloseMold(row) {
      this.showMold = false
      if (row) {
        this.submitForm.moldId = row.id
        this.submitForm.moldName = row.moldName
        this.submitForm.categoryId = row.categoryId
        this.submitForm.categoryName = row.categoryName
        this.submitForm.unit = row.unit
        this.submitForm.weight = row.weight
        this.showAttribute = true
        this.$nextTick(() => {
          this.$refs.selectAttribute.init(row)
        })
      }
    },
    handleCloseAttribute(row) {
      this.showAttribute = false
      if (row) {
        this.submitForm.productName = this.submitForm.moldName + '*' + row.color + '*' + row.material + '*' + row.size
        this.submitForm.color = row.color
        this.submitForm.material = row.material
        this.submitForm.size = row.size
        this.submitForm.length = row.length
        this.submitForm.unitPrice = row.unitPrice
        this.submitForm.weight = row.weight
        this.submitForm.quantity = row.quantity
      }
    }
  }
}
</script>

<style scoped>

</style>
